<template>
	<view class="nas-saveUploadFile">
		<view class="nas-fileContent">
			<view class="nas-top-bar">
				<view class="nas-bar-item" @click="goBack"><image src="/static/nas-static/nas_back_s.svg" mode=""></image></view>
				<view class="nas-bar-item">{{ title }}</view>
				<view class="nas-bar-item" @click="showCreateFile = true">新建文件夹</view>
			</view>
			<view v-show="showContent">
				<view class="nas-saveUploadFile-item" v-for="(item, index) in fileList" :key="index" @click="intoFile(item)">
					<image src="/static/nas-static/nas-list-file.svg" mode=""></image>
					<view>{{ item.filename || item.name }}</view>
				</view>
			</view>

			<!-- 底部操作栏 -->
			<view class="nas-bottom">
				<view class="nas-cancel" @click="goHome">取消</view>
				<view class="nas-confirm" @click="goUploadFile">确定</view>
			</view>

			<!-- 新建文件夹弹窗 -->
			<u-modal v-model="showCreateFile" title="新建文件夹" :showCancelButton="true" @confirm="createFile">
				<view class="nas-content"><uni-easyinput v-model="createFileName" :clearable="true"></uni-easyinput></view>
			</u-modal>
		</view>
	</view>
</template>

<script>
import NasUpload from '../utils/uploading';
import request from '../utils/request.js';
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			fileList: [],
			showContent: true,
			title: '',
			showCreateFile: false,
			createFileName: '',
			directorys: [], // 原本的文件地址数组
			newDirectory: '', // 选择的文件目录
			type: '', // 文件操作的类型（1：移动文件，2：上传文件，3：复制文件，4：下载文件 5：转存）
			familyId: '', // 家庭云目录id
			familyInfos: {}, // 家庭云转存的文件信息
			folderId: '/0' // 家庭云目录
		};
	},
	onLoad(e) {
		// 判断类型
		this.type = e.type;
		switch (this.type) {
			case '1':
				this.title = '选择保存的路径';
				this.directorys = JSON.parse(e.directorys);
				// 获取文件列表
				this.getInfos();
				break;
			case '2':
				this.title = '选择保存的路径';
				// 获取文件列表
				this.getInfos();
				break;
			case '3':
				this.title = '选择保存的路径';
				this.directorys = JSON.parse(e.directorys);
				// 获取文件列表
				this.getInfos();
				break;
			case '5':
				this.familyId = e.id || '';
				if(this.familyId) {
					this.title = '选择分享的路径';
				}else {
					this.title = '选择保存的路径';
				}
				// 获取文件列表
				this.familyInfos = JSON.parse(e.familyInfos);
				this.getFamilyInfos();
				break;
			default:
				break;
		}
	},

	methods: {
		...mapMutations(['nasUploadingListAdd']),
		// 获取家庭云列表
		async getFamilyInfos() {
			const params = {
				method: 'POST',
				url: '/naslocal/liantong/fileList',
				data: {
					folderId: this.folderId.split('/').pop(),
					spaceType: this.familyId ? '1' : '0',
					familyId: this.familyId || ''
				}
			};
			console.log(params, 'params');
			const res = await request(params);
			console.log(res, '家庭云列表数据');
			// 过滤出文件夹
			this.fileList = res.data;
		},

		async getInfos() {
			const params = {
				method: 'POST',
				url: '/nas/rd_center/data/get',
				data: {
					method: 'capacity.nas.cloud.file.list',
					type: 1,
					data: {
						directory: this.newDirectory === '' ? '/' : this.newDirectory,
						limit: 1000,
						offset: 0
					}
				}
			};
			// console.log(params, '请求的数据');
			const res = await request(params);
			// 过滤出文件夹
			this.fileList = res.data.data.filter(val => val.type === 'DIR');
			console.log(this.fileList, 'this.fileList');
		},

		intoFile(item) {
			// 判断列表的类型，家庭云还是云nas
			if (this.type == 5) {
				this.intoFamilyFile(item);
			} else {
				this.intoNasFile(item);
			}
		},

		// 打开家庭云
		intoFamilyFile(item) {
			this.title = item.name;
			this.folderId = this.folderId + '/' + item.id;
			// console.log(this.folderId, 'this.folderId')
			this.getFamilyInfos();
		},

		intoNasFile(item) {
			this.fileList = [];
			this.title = item.filename;
			// 当前的路径
			this.newDirectory = `${this.newDirectory}/${item.filename}`;
			// 获取当前文件下的文件夹
			this.getInfos();
		},

		// 左上角页面返回
		goBack() {
			if (this.type == 5) {
				console.log(this.folderId, 'this.folderId');
				// 分享的处理
				if (!this.folderId || this.folderId === '/0') {
					uni.navigateBack({
						delta: 1
					});
				} else {
					// 返回到上一级的目录
					const newList = this.folderId.split('/');
					newList.pop();
					if (newList.length === 1) {
						this.folderId = '/0';
					} else {
						this.folderId = newList.join('/');
					}
					console.log(this.folderId, 'folderId');
					// 获取当前文件下的文件夹
					this.getFamilyInfos();
				}
			} else {
				if (!this.newDirectory || this.newDirectory === '/') {
					uni.navigateBack({
						delta: 1
					});
				} else {
					// 返回到上一级的目录
					const newList = this.newDirectory.split('/');
					newList.pop();
					if (newList.length === 1) {
						this.newDirectory = '/';
					} else {
						this.newDirectory = newList.join('/');
					}
					console.log(this.newDirectory, 'newDirectory');
					// 获取当前文件下的文件夹
					this.getInfos();
				}
			}
		},

		// 取消直接返回上一页
		goHome() {
			uni.navigateBack({
				delta: 1
			});
		},

		// 确认按钮操作
		goUploadFile() {
			switch (this.type) {
				case '1':
					this.moveFile();
					break;
				case '2':
					this.upFiles();
					break;
				case '3':
					this.copyFiles();
					break;
				case '5':
					this.upFamilyFiles();
					break;
				default:
					break;
			}
		},

		// 家庭云转存
		async upFamilyFiles() {
			const params = {
				method: 'POST',
				url: '/nas/transfer/create',
				data: {
					fileList: this.familyInfos.fileList,
					dirList: this.familyInfos.dirList,
					targetPath: this.folderId.split('/').pop(),
					direction: '0',
					spaceType: this.familyId ? '1' : '0',
					familyId: this.familyId || ''
				}
			};
			// console.log(params, '家庭云转存的请求头');
			const res = await request(params);
			// console.log(res, '家庭云转存的结果');
			uni.$emit('refreshData');
			if (this.familyId) {
				uni.navigateBack({
					delta: 2
				});
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		},

		// 移动文件
		async moveFile() {
			for (let i = 0; i < this.directorys.length; i++) {
				const direcList = this.directorys[i].split('/');
				const params = {
					method: 'POST',
					url: '/nas/rd_center/data/get',
					data: {
						method: 'capacity.nas.cloud.file.dir.rename',
						type: 1,
						data: {
							directory: this.directorys[i],
							newDirectory: this.newDirectory + '/' + direcList[direcList.length - 1]
						}
					}
				};
				// console.log(params, '移动文件的请求头');
				const res = await request(params);
				// console.log(res, '移动文件的返回数据');
				// 返回首页
				uni.$emit('refreshData');
				uni.navigateBack({
					delta: 1
				});
			}
		},

		// 上传文件
		upFiles() {
			const filePath = this.newDirectory || '/';
			const nasUploading = uni.getStorageSync('nasUploading') || '';
			if (nasUploading) {
				const nasUploadingList = JSON.parse(nasUploading);
				nasUploadingList.forEach(element => {
					// 处理参数
					const item = {
						catalogue: filePath, //上传到的目标文件夹目录
						// name: element.name, //文件的名字
						filePath: element.path, //上传文件的本地地址
						size: element.size, //文件的总大小
						uid: 'nas_' + this.uuid() //唯一的标识
					};
					// console.log(item, 'item');
					let nasUpload = new NasUpload.nasUploadClass({
						...item
					});
					// console.log(nasUpload, 'nasUpload');
					this.nasUploadingListAdd(nasUpload);
				});
				uni.removeStorageSync('nasUploading');
				uni.navigateTo({
					url: '/pages/nas/nas-transferList/nas-transferList?isBackHome=1'
				});
			} else {
				uni.navigateTo({
					url: '/pages/nas/nas-transferList/nas-transferList?isBackHome=1'
				});
			}
		},

		// 复制文件
		async copyFiles() {
			for (let i = 0; i < this.directorys.length; i++) {
				const direcList = this.directorys[i].split('/');
				const params = {
					method: 'POST',
					url: '/nas/rd_center/data/get',
					data: {
						method: 'capacity.nas.cloud.file.cpp',
						type: 1,
						data: {
							filepath: this.directorys[i],
							newfilepath: this.newDirectory + '/' + direcList[direcList.length - 1]
						}
					}
				};
				const res = await request(params);
				// 返回首页
				uni.$emit('refreshData');
				uni.navigateBack({
					delta: 1
				});
			}
		},

		// 确认创建文件夹
		async createFile() {
			if (!this.createFileName) return;
			if (this.type == 5) {
				const params = {
					method: 'POST',
					url: '/naslocal/liantong/createFolder',
					data: {
						parentFolderId: this.folderId.split('/').pop(),
						folderName: this.createFileName,
						spaceType: this.familyId ? '1' : '0',
						familyId: this.familyId || ''
					}
				};
				console.log(params, '家庭云创建文件夹的请求');
				const res = await request(params);
				console.log(res, '家庭云创建文件夹的返回');
				this.createFileName = '';
				// 重新获取列表数据
				this.getFamilyInfos();
			} else {
				const params = {
					method: 'POST',
					url: '/nas/rd_center/data/get',
					data: {
						method: 'capacity.nas.cloud.file.dir.create',
						type: 1,
						data: {
							directory: `${this.newDirectory}/${this.createFileName}`
						}
					}
				};
				const res = await request(params);
				this.createFileName = '';
				// 重新获取列表数据
				this.getInfos();
			}
		},

		//生成随机数
		uuid() {
			let len = 8; //长度
			let radix = 8; //基数
			let chars = 'GHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
			let uuid = [],
				i;
			radix = radix || chars.length;
			if (len) {
				for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
			} else {
				let r = null;
				uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
				uuid[14] = '4';
				for (i = 0; i < 36; i++) {
					if (!uuid[i]) {
						r = 0 | (Math.random() * 16);
						uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
					}
				}
			}
			return uuid.join('');
		}
	}
};
</script>

<style lang="scss" scoped>
.nas-saveUploadFile {
	position: relative;
	height: 100%;
	overflow-y: hidden;
	background: #fff;
	.nas-fileContent {
		position: absolute;
		top: 158rpx;
		left: 0;
		right: 0;
		bottom: 168rpx;
		overflow-y: auto;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
	.nas-saveUploadFile-item {
		display: flex;
		align-items: center;
		height: 96rpx;
		border-bottom: 1rpx solid #f5f5f5;
		image {
			width: 56rpx;
			height: 56rpx;
		}
		view {
			margin-left: 16rpx;
			font-family: HarmonyOS_Sans_SC;
			font-size: 32rpx;
			color: #333333;
			letter-spacing: 0;
			font-weight: 400;
		}
	}
	.nas-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 168rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: #ffffff;
		.nas-cancel {
			width: 335rpx;
			height: 96rpx;
			background: #f5f5f5;
			border-radius: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: HarmonyOS_Sans_SC;
			font-size: 32rpx;
			color: #808080;
			letter-spacing: 0;
			font-weight: 400;
		}
		.nas-confirm {
			width: 335rpx;
			height: 96rpx;
			background: #3069dc;
			border-radius: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: HarmonyOS_Sans_SC;
			font-size: 32rpx;
			color: #ffffff;
			letter-spacing: 0;
			font-weight: 400;
		}
	}
	.nas-top-bar {
		position: fixed;
		top: 64rpx;
		left: 10rpx;
		right: 10rpx;
		height: 95rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		border-bottom: 1rpx solid #d9d9d9;
		.nas-bar-item {
			flex: 1;
			&:first-of-type {
				display: flex;
				align-items: center;
				image {
					width: 50rpx;
					height: 34rpx;
				}
			}
			&:nth-of-type(2) {
				text-align: center;
				ont-family: HarmonyOS_Sans_SC_Medium;
				font-size: 32rpx;
				color: rgba(51, 51, 51, 0.9);
				font-weight: 500;
			}
			&:last-of-type {
				text-align: right;
				font-family: HarmonyOS_Sans_SC;
				font-size: 26rpx;
				color: #3069dc;
				font-weight: 400;
				margin-right: 10rpx;
			}
		}
	}
	.nas-content {
		padding: 32rpx;
		text-align: center;
		font-family: HarmonyOS_Sans_SC;
		font-size: 28rpx;
		color: #808080;
		letter-spacing: 0;
		font-weight: 400;
	}
}
</style>
